

//导入组件依赖
import React, { Component } from 'react';
import { TextInput, View, StyleSheet, TouchableOpacity} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Icon from '../../components/CustomIcons';

//定义组件
export default class GlobalSearch extends Component{

    //组件默认属性
    static defaultProps = {
        onSearch: function (value) {},
        onScanning: function () {}
    }

    //组件构造函数
    constructor(props){
        super(props);

        //组件数据状态
        this.state = {
            value: ''
        }
    }

    //组件结构输出
    render(){
        return(
            <View style={{height: 40, margin: 10}}>
            <View style={styles.container}>
                <View style={{marginLeft: 10}}><TouchableOpacity onPress={() => this.props.onSearch(this.state.value)}><FontAwesome name="search" size={16} color="#ccc" /></TouchableOpacity></View>
                <View style={styles.inputContainer}>
                    <TextInput
                        {...this.props}
                        style={styles.inputStyle}
                        returnKeyType={"search"}
                        selectTextOnFocus={true}
                        clearButtonMode={"while-editing"}
                        onChangeText={ (value) => this.setState({value}) }
                        onSubmitEditing={ () => this.props.onSearch(this.state.value) }
                        ref="refTextBox"
                        underlineColorAndroid="transparent"
                    />
                </View>
                <TouchableOpacity onPress={() => this.props.onScanning()} style={{marginRight: 10}}>
                    <Icon name="icon-scan" size={16} color="#999"></Icon>
                </TouchableOpacity>
            </View>
            </View>
        );
    }
}

//定义组件样式
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#fff',
        borderRadius: 3,
        alignItems: 'center',
    },
    inputContainer: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10
    },
    inputStyle: {
        padding: 0,
        margin: 0,
        borderWidth: 0,
        fontSize: 14
    }
});